<template>
  <div class="form-subform-preview">
    <div class="form-preview-group">
      <label>
        {{ _displayName }}
        <span class="form-preview-notNull" v-if="field.isNull == 0">*</span>
      </label>
      <div class="form-preview-mock">
        <span class="form-type-text">{{$t('common.form.type.subForm')}}</span>
      </div>
    </div>

    <div class="form-subform-preview-content">
      <div class="form-preview">
        <div
          class="form-design-preview"
          v-for="item in subFormFieldList"
          :key="item.fieldName">
          <div class="form-preview-group">{{ returnDisplayName(item) }}<span class="form-preview-notNull mar-l-3" v-if="item.isNull === 0">*</span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* props */
import { previewProps } from '@src/component/form/components/props';
/* mixin */
import FormSubFormMixin from '@src/component/form/mixin/form.subForm';
import translate from '@src/component/form/mixin/translate.js'

export default {
  name: 'form-suc-case-preview',
  mixins: [FormSubFormMixin, translate],
  props: previewProps,
  computed: {
    subFormFieldList() {
      return  this.field?.subFormFieldList.sort((a, b) => a.orderId - b.orderId) || [];
    }
  }
};
</script>

<style lang="scss" scoped>
@import '@src/component/form/components/FormSubForm/FormSubForm.scss';
</style>
